<!--
 * @Author: weikang
 * @Description: 
 * @Date: 2023-12-19 10:25:14
 * @LastEditTime: 2023-12-22 18:07:50
 * @FilePath: \lianyungang-dashborad\src\model\warning.vue
-->
<template>
  <div class="model-panel">
    <my-title title="预警情况"></my-title>
    <div class="content-panel">
      <div class="line-flex-panel">
        <div class="item-box" v-for="(item, index) in types" :key="index">
          <img :src="item.icon" alt="" />
          <span class="box-text">{{ item.value }}件</span>
        </div>
      </div>
      <div class="title-line">
        <div class="line"></div>
        <div class="line-text">本月新增</div>
        <div class="line"></div>
      </div>
    </div>
    <div class="line-flex-panel">
      <div class="new-item" v-for="(item, index) in news" :key="index">
        {{ item.value }}件
      </div>
    </div>
    <div class="table-panel">
      <table BORDER="0" class="table-item" cellspacing="0">
        <thead class="table-header">
          <tr>
            <th v-for="item in column" :key="item.prop">
              {{ item.title }}
            </th>
          </tr>
        </thead>
      </table>
      <div class="table-body">
        <table BORDER="0" class="table-item" cellspacing="0" ref="table">
          <tbody>
            <tr v-for="(row, index) in tableData" :key="index">
              <td v-for="item in column" :key="item.prop">
                {{ row[item.prop] }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup>
import MyTitle from "@/components/MyTitle.vue";
import { nextTick, onMounted, reactive, ref } from "vue";
import { getWarningData } from "@/api/apis.js";
import { getAssetsFile } from "./utils";

const types = reactive([
  {
    icon: getAssetsFile("warning-red.png"),
    value: 0,
    prop: "red",
  },
  {
    icon: getAssetsFile("warning-orange.png"),
    value: 0,
    prop: "orange",
  },
  {
    icon: getAssetsFile("warning-yellow.png"),
    value: 0,
    prop: "yellow",
  },
]);

const news = reactive([
  {
    value: 0,
    prop: "red",
  },
  {
    value: 0,
    prop: "orange",
  },
  {
    value: 0,
    prop: "yellow",
  },
]);

const tableData = ref([]);
const column = reactive([
  {
    prop: "name",
    title: "项目",
  },
  {
    prop: "reason",
    title: "原因",
  },
  {
    prop: "level",
    title: "等级",
  },
]);

getWarningData().then((res) => {
  console.log(
    "%c [ res ]-101",
    "font-size:13px; background:pink; color:#bf2c9f;",
    res
  );

  types.forEach((item) => {
    item.value = res.data.total[item.prop] || 0;
  });
  news.forEach((item) => {
    item.value = res.data.new[item.prop] || 0;
  });
  tableData.value = res.data.project;

  nextTick(() => {
    autoScroll();
  });
});

const table = ref();
// const 
const autoScroll = () => {
  var ele = table.value; // 获取要判断的 dom 元素

  const myHeight = ele.getBoundingClientRect().height;
  var scrollTop = ele.parentNode.scrollTop; // 获取 dom 元素的 scrollTop 值
  var scrollHeight = ele.parentNode.getBoundingClientRect().height; // 获取窗口的 scrollHeight 值
  console.log(scrollHeight >= myHeight);
  if (scrollHeight >= myHeight) return;
  if (myHeight - scrollTop - 10 >= scrollHeight) {
    ele.parentNode.scrollTo({ top: scrollTop + 1, behavior: "smooth" });
  } else {
    ele.parentNode.scrollTo({ top: 0, behavior: "smooth" });
  }
  setTimeout(() => {
    autoScroll();
  }, 300);
};
</script>

<style lang="scss" scoped>
.model-panel {
  height: 320px;
  .line-flex-panel {
    justify-content: space-around;
    .item-box {
      img {
        width: 80px;
        height: 59px;
        display: block;
      }
      .box-text {
        display: block;
        margin-top: 5px;
        font-size: 16px;
        font-family: DINPro, DINPro;
        font-weight: bold;
        color: #ffffff;
        line-height: 20px;
        text-align: center;
      }
    }
  }

  .title-line {
    display: flex;
    align-items: center;
    padding: 8px 39px;
    .line {
      flex: 1;
      height: 1px;
      background: rgba(255, 255, 255, 0.1);
    }
    .line-text {
      font-size: 14px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      padding: 0 4px;
    }
  }
  .table-panel {
    padding: 15px 20px;
    table {
      width: 100%;
    }
  }
  .table-item {
    color: #fff;
    border: 1px solid #1b2c3c;

    .table-header {
      th {
        width: 33.33%;
        height: 30px;
        background: rgba(0, 90, 148, 0.3);
        font-size: 14px;
        font-weight: 500;
        color: #00fff4;
        text-align: left;
        padding: 0 16px;
        border-left: 1px solid #1b2c3c;
        border-top: 1px solid #1b2c3c;
        box-sizing: border-box;
      }
    }
  }
  .table-body {
    height: 85px;
    overflow-y: auto;
    /* 滚动条整体 */
    &::-webkit-scrollbar {
      width: 2px;
    }
    /* 两个滚动条交接处 -- x轴和y轴 */
    &::-webkit-scrollbar-corner {
      background-color: transparent;
    }

    /* 滚动条滑块 */
    &::-webkit-scrollbar-thumb {
      border-radius: 4px;
      background: #00c5fe;
    }

    /* 滚动条轨道 */
    &::-webkit-scrollbar-track {
      border-radius: 4px;
      background: transparent;
    }

    tbody {
      td {
        width: 33.33%;
        height: 30px;
        font-size: 12px;
        font-weight: 500;
        color: #ffffff;
        border-left: 1px solid #1b2c3c;
        border-top: 1px solid #1b2c3c;
        padding: 0 16px;
        // overflow: hidden;
        // text-overflow: ellipsis;
        // white-space: nowrap;
        box-sizing: border-box;
      }
    }
  }
}

.new-item {
  font-size: 14px;
  font-weight: bold;
  color: #5bfff9;
  line-height: 18px;
}
</style>